<template>
  <div class="page-content" :class="ccsClass">
    <scroller
      ref="scroller"
      v-if="scroll"
      :on-refresh="refresh"
      :on-infinite="infinite">
        <div class="page-content-inner">
          <slot></slot>
        </div>
    </scroller>
    <div v-else class="page-content-inner">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PageContent',
  props: {
    scroll: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    page () {
      return this.$parent
    },
    ccsClass () {
      return {
        'is-scroll': this.scroll
      }
    }
  },
  methods: {
    async refresh (done) {
      setTimeout(() => {
        done(true)
      }, 1500)
      this.$emit('refresh')
    },
    async infinite (done) {
      setTimeout(() => {
        done(true)
      }, 1500)
      this.$emit('infinite')
    }
  },
  mounted () {
    console.log(this.page)
  }
}
</script>
